<template>
  <div>
      <div class="back" @click="handleClick">
          <i class="iconfont icon-zuojiantou"></i>
      </div>
      <h1>歌曲播放</h1>
      <div class="play_content">
          <div class="play_guide">
              <img src="/play-item.png" alt="">
          </div>
          <div>
              <div class="play_CD">
              <img src="/pan.png" alt="">
          </div>
          <p>我们现夏枝繁茂时再见</p>
          <div class="icon_play">
              <img src="/play.png" alt="">
          </div>
          </div>
      </div>
    
  </div>
</template>

<script>
export default {
  mounted() {
    // console.log(this.$route.params);
    var { id } = this.$route.params;
    console.log(id);
  },
  methods: {
      handleClick(){
            this.$router.back();
      },
  },
};
</script>

<style scoped>
html,
body {
  background-color: #383a3d;
}
.play_content{
    width: 100%;
    height: 100%;
    padding-bottom: 500px;
    padding-top: 20%;
    position: relative;
    border: 1px solid #333;
}
.play_guide{
    position: absolute;
    left: 45%;
    z-index: 100;
}
p{
    padding: 20px;
    text-align: center;
    margin-top: 150px;
}
.play_CD{
    transform: translateX(28%) translateY(40%);
}
.icon_play{
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
</style>